//创建 主体Box标签.

var Box = document.getElementById('loginbox');

//创建 登录|注册：
var login = document.createElement('viod-box');
const minute = document.createElement('viod-box');
var signup = document.createElement('viod-box'
);
// 样式：
login.innerText = "注册";
minute.innerText = "|";
signup.innerText = " 登录";

login.className = "login";
minute.className = "minute";
signup.className = "signup";

 //上弦：
Box.appendChild(login);
Box.appendChild(minute);
Box.appendChild(signup);

// 交互 - 跳转：
// 点击事件：
login.addEventListener('click', function(){
  console.log('1');
});
signup.addEventListener('click', function(){
  console.log('2');
});
// 交互 - 动画：
// 添加鼠标移入事件
login.addEventListener('mouseenter', function() {
  this.style.color= '#111';
  this.style.backgroundColor = '#0b4c21f0';
});
signup.addEventListener('mouseenter', function() {
  this.style.color = '#111';
  this.style.backgroundColor = '#0b4c21f0';
});
// 添加鼠标移出事件
login.addEventListener('mouseleave', function() {
  this.style.color = '#fff'; // 恢复透明或原始颜色
  this.style.backgroundColor = '#196';
});
signup.addEventListener('mouseleave', function() {
  this.style.color = '#fff'; // 恢复透明或原始颜色
  this.style.backgroundColor = '#196';
});